<template>
    <div class="box">
        <el-card class="box-card">
            <div class="leftTop">
                <el-collapse @change="handleChange" class="growlBor">
                    <el-collapse-item title="练习室" class="myGrowl">
                        <div class="activeCol" @click="toTraining">我的练习室</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-card>
        <el-card class="box-card1">
            <div class="leftBot">
                <div>
                    <a href="" class="navigation-item-content active">缓存</a>
                </div>
                <div>
                    <a href="" class="navigation-item-content">音频库</a>
                </div>
                <div>
                    <a href="" class="navigation-item-content">收藏</a>
                </div>
                <div>
                    <a href="" class="navigation-item-content">历史</a>
                </div>
            </div>
        </el-card>
    </div>
    <el-card class="box-card2">
        <div class="boxRig">
            <div class="rigthTop">
                <div class="boxes">
                    <span :class="type === 0 ? 'active' : ''" @click="type = 0">全部</span>
                    <span :class="type === 1 ? 'active' : ''" @click="type = 1">我创建的</span>
                    <span :class="type === 2 ? 'active' : ''" @click="type = 2">我加入的</span>
                    <span :class="type === 3 ? 'active' : ''" @click="type = 3">我课程的</span>
                </div>
                <div class="training-btn">创建</div>
            </div>
        </div>
    </el-card>
    <el-card class="box-card3">
        <el-empty description="description" />
    </el-card>
</template>

<script lang="ts">
import router from "@/router";
import { defineComponent, ref, watch } from "vue";

export default defineComponent({
    name: "Training",
});
</script>

<script setup lang="ts">
const loading = ref<boolean>(false);
const type = ref<number>(0);
const handleChange = (val: string[]) => {
    console.log(val);
};
//跳转到training页面
const toTraining = () => {
    console.log(111);
    router.push({
        name: "Training",
    });
};

// //改变type，控制tab栏高亮显示
// const changeType = (val: number) => {
//     type.value = val;
// };
//监听值的改变，下方图片闪烁
watch(type, () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 100);
});
</script>

<style lang="less">
.box {
    float: left;
}
.growlBor {
    border: none;
}
.myGrowl {
    width: 150px;
}
.activeCol {
    color: #f93684;
    text-align: center;
    cursor: pointer;
}
.leftBot a {
    font-size: 14px;
    color: #111;
    padding: 17px 21px;
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
}
.leftBot div a:before {
    background-color: #fff;
    content: " ";
    position: absolute;
    width: 4px;
    height: 37px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
}
.navigation-item-content.active:before,
.navigation-item-content:hover:before {
    background-color: #f93684;
}
.navigation-item-content:before {
    background-color: #fff;
    content: " ";
    position: absolute;
    width: 4px;
    height: 37px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
}
.training-container .traing-filter {
    padding: 26px 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.training-container .traing-filter .boxes span.active {
    background-color: #f93684;
    color: #fff;
}
.training-container .traing-filter .boxes span {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 9px 12px;
    user-select: none;
    margin-right: 24px;
    margin-bottom: 10px;
}

.training-container .traing-filter .training-btn {
    width: 84px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #f93684;
    border-radius: 16px;
    cursor: pointer;
}

.box-card {
    margin-top: 10px;
    width: 170px;
    margin-right: 10px;
}
.box-card1 {
    width: 170px;
    margin-right: 10px;
    margin-top: 8px;
}
.box-card2 {
    // border-radius: 4px;
    height: 96px;
    margin-top: 10px;
    // width: 1016px;
}
.box-card3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 600px;
    margin-top: 10px;
}
.rigthTop {
    padding:10px;
    border-radius: 4px;
    // background-color: #fff;
    // margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    // background-color: powderblue;
}
.boxes span {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 9px 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 24px;
    margin-bottom: 10px;
}
.boxes span.active {
    background-color: #f93684;
    color: #fff;
}
.training-btn {
    width: 84px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #f93684;
    border-radius: 16px;
    cursor: pointer;
    margin-left: 200px;
}
</style>
